<template>
  <div>
    <div style="position: fixed; background-color: white; top:0; left: 0; width:100%; font-size:20px; font-weight: bold; text-align: center; padding: 10px;">
      {{voteInfo.name}}
      <div style="float: right; padding-right: 10px;">
        <el-avatar shape="circle" size="small" :src="userInfo.avatar+'_60x60q90.jpg'"></el-avatar>
      </div>
    </div>
    <div style="margin-top: 40px; padding: 20px;">
      <div v-if="voteInfo.status==1">
        <div v-if="canVote">
          {{userInfo.realName}}，您已用票数{{usedTicket}}<span style="cursor: pointer; color:#409EFF" @click="voteDetail = true">（点击查看）</span>，
          剩余票数 <span style="font-weight: bold">{{leftTicket}}</span>
        </div>
        <div v-if="!canVote">
          * 您没有投票的权限，不可投票
        </div>
      </div>
      <div v-if="voteInfo.status!=1" style="text-align: center">
        {{getVoteStatusStr()}}
      </div>
    </div>
    <table  class="list">
      <tr  v-for="(item,index) in voteStatic">
        <td :style="isPC()?'':'width:30px;'">
          {{index+1}}
        </td>
        <td :style="isPC()?'':'width:50px;'">
          <el-avatar shape="circle" size="small" :src="item.img"></el-avatar>
        </td>
        <td>
          {{item.name}}
        </td>
        <td>
          {{item.description}}
        </td>
        <td v-if="voteInfo.publicResult" >
          当前{{item.ticket}}票
        </td>
        <td style="text-align: left">
          <el-input-number :disabled="voteInfo.status!=1 || (!canVote) || (voteInfo.voteSelf===false && userInfo.dingId==item.identity)" :min="0" placeholder="0" style="width:90px;" size="mini" @change="checkTicket" v-model="item.newTicket"></el-input-number>
        </td>
        <td style="width:10px;">

        </td>
      </tr>
    </table>
    <div style="position: fixed; z-index: 99; bottom:10px; text-align: center; width: 100%; background-color: white">
      <el-button style="width: 150px;" v-if="userInfo.roleIdList && userInfo.roleIdList.some((x,y,z)=>x==2)" type="primary" @click="gotoManager()">后台管理</el-button>
      <el-button v-if="voteInfo.status==1 && (canVote)" type="primary" style="width: 150px;" @click="giveVote" :loading="loading">投票</el-button>
    </div>
    <el-dialog
      title="公告"
      :visible.sync="notice"
      width="80%"
      center>
      <span v-if="voteInfo.status!=1">{{getVoteStatusStr()}}</span>
      <span v-if="voteInfo.status==1">{{this.voteInfo.notice}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="notice = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="我的投票历史"
      :visible.sync="voteDetail"
      width="80%"
      center>
      <div v-for="(item,index) in voteHistory">
        {{item.voteDate}} 投给 {{item.target}} {{item.ticket}}票
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="voteDetail = false" >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import voteMixin from '@/mixins/vote'

  export default {
    data () {
      return {
        voteInfo: {},
        voteHistory:[],
        voteStatic:[],
        usedTicket:0,
        leftTicket:0,
        canVote: false,
        notice:false,
        voteDetail: false,
        loading: false
      }
    },
    mixins: [dingMixin,voteMixin],
    created(){
      this.voteId = this.$route.query.voteId
      this.queryVoteBase()
      this.getMyVoteHistory()
      this.getVoteStatic()
    },
    components: {

    },
    methods: {
      getVoteStatusStr(){
        if(this.voteInfo.status==0){
          return '活动尚未开始'
        }
        else if(this.voteInfo.status==2){
          return '活动已经结束'
        }
      },
      clearFormTicket(){
        for(let item of this.voteStatic){
          item.newTicket = 0
        }
      },
      checkTicket(newVal,oldVal){
        if(!oldVal){
          oldVal = 0
        }
        let offset = newVal - oldVal;
        this.leftTicket = this.leftTicket - offset;
        if(this.leftTicket<0){
          this.$message({message: '您的投票已超过可投票数', type: 'error', duration: 1500})
        }
      },
      giveVote(){
        if(this.leftTicket<0){
          this.$message({message: '可投票数不足，请重新投票', type: 'error', duration: 1500})
          return;
        }
        this.loading = true
        let form = {voteId: this.voteId, list: [] };
        for(let item of this.voteStatic){
          if(item.newTicket>0){
            form.list.push({
              targetId: item.targetId,
              ticket: item.newTicket
            });
          }
        }
        this.$http({
          url: this.$http.adornUrl('/vote/votehistory/save'),
          method: 'post',
          data: this.$http.adornData(form)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({message: '投票成功，非常感谢您的投票', type: 'success', duration: 3000})
            this.clearFormTicket();
            this.getMyVoteHistory();
          }else{
            this.$message.error(data.msg)
          }
        }).finally(()=>{
          this.loading=false
        })
      },
      gotoManager(){
        this.$router.push('vote-static');
      },
      getMyVoteHistory(){
        this.$http({
          url: this.$http.adornUrl('/vote/votehistory/myVoteHis'),
          method: 'get',
          params: this.$http.adornParams({'voteId': this.voteId})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.voteHistory = data.list
            this.usedTicket = data.usedTicket
            this.leftTicket = data.leftTicket
            this.canVote = data.canVote
          }
        })
      },
      getVoteStatic () {
        this.$http({
          url: this.$http.adornUrl('/vote/votehistory/listStatic'),
          method: 'get',
          params: this.$http.adornParams({'voteId': this.voteId})
        }).then(({data}) => {
          if (data && data.code === 0) {
            if(!this.voteInfo.publicResult){
              data.list.sort((a,b) => {return a.targetId-b.targetId;});
              this.voteStatic = data.list
            }else{
              this.voteStatic = data.list
            }
          }
        })
      },
      // 获取数据列表
      queryVoteBase(){
        this.$http({
          url: this.$http.adornUrl('/vote/votebase/info/'+this.voteId),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.voteInfo = data.voteBase
              if(this.voteInfo.notice>''){
                this.notice = true
              }
            }
          }
        )
      },
    }
  }
</script>
<style lang="scss" scoped>

  .list{
    width:100%;
    table-layout: fixed;
    padding: 20px;
    margin-bottom: 50px;
  }


</style>
